<template>
	<div id="search">
		<SearchIpt />
		<van-sidebar v-model="active" @change="onChange" class="sider-bar">
			<van-sidebar-item v-for="(item,index) in list" :title="item" :key="index" />
		</van-sidebar>
		<p class="nodata" v-show="dataflag">暂时还没有该类型的商品</p>
		<div class="goods">
			<van-card v-for="item in goods" :price="item.price" :desc="item.seb_name" :title="item.name"
				:thumb="item.detail.imgs[0]" :key="item.proid" @click="$router.push(`/goodsdil/${item._id}`).catch(() =>{})">
				<template #tags>
					<van-tag plain type="danger">{{item.classify}}</van-tag>
				</template>
			</van-card>
		</div>
	</div>
</template>

<script>
	import SearchIpt from "../components/searchipt.vue"
	export default {
		name: 'list',
		data() {
			return {
				active: "",
				list: ["全部宝贝", "擦地吸尘器", "拖地吸尘器", "手持吸尘器", "除螨吸尘器", "智能吸尘器", "桶式吸尘器", "卧式吸尘器", "MINI吸尘器", "配件"],
				goods: this.$route.query.data,
				dataflag: false
			}
		},
		components: {
			SearchIpt
		},
		methods: {
			onChange() {
				let q = this.list[this.active]
				if (q == "全部宝贝") {
					q = ""
				}
				this.$axios({
					url: '/goods',
					params: {
						_q: q
					}
				}).then(
					res => {
						if (res.data) {
							this.goods = res.data
							this.dataflag = false
						} else {
							this.goods = []
							this.dataflag = true
						}
					})
			}
		}
	}
</script>

<style scoped>
	#search {
		position: relative;
	}

	.van-sidebar {
		overflow: hidden;
	}

	.van-sidebar-item {
		width: 2rem;
		height: 0.96rem;
		padding: 0.35rem 0.12rem;
		font-size: 0.22rem;
	}

	.goods {
		position: absolute;
		left: 1.45rem;
		top: 0.9rem;
		width: 4.85rem;
		overflow: auto;
		max-height: 9.5rem;
		padding-bottom: 0.5rem;
	}

	.nodata {
		color: #666;
		width: 2.5rem;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-left: -0.6rem;
		z-index: 1;
	}
</style>
